<template>
  <el-dialog
    :title="dialogTitle"
    :visible="showDialog"
    :width="width"
    :fullscreen="fullscreen"
    :append-to-body="appendToBody"
    @close="close">
    <!--插槽装传递过来的内容区域-->
    <slot name="dialogContent"></slot>
    <span slot="footer" class="dialog-footer">
        <el-button v-for="item in buttons" :key="item.id" :type="item.type" @click.stop="buttonClick(item.id)">{{item.label}}</el-button>
      </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'xnzw-dialog',
  data () {
    return {}
  },
  props: {
    // 弹出框的title
    dialogTitle: {
      type: String,
      default: '提示'
    },
    // 是否显示dialog
    showDialog: {
      type: Boolean,
      default: false
    },
    // 宽度
    width: {
      type: String,
      default: '50%'
    },
    // 是否全屏
    fullscreen: {
      type: Boolean,
      default: false
    },
    // 嵌套的dialog必须指定属性为true
    appendToBody: {
      type: Boolean,
      default: false
    },
    buttons: {
      type: Array,
      default: function () {
        return [
          {
            id: '1',
            label: '取消',
            type: '',
            fn: 'dialogClose'
          },
          {
            id: '2',
            label: '确定',
            type: 'primary',
            fn: 'dialogSure'
          }
        ]
      }
    }
  },
  methods: {
    close: function () {
      // console.log(1)
      this.$emit('close')
      // console.log(done)
    },
    // 响应父组件事件
    buttonClick: function (id) {
      // console.log(id)
      let buttons = this._props.buttons
      for (let i = 0; i < buttons.length; i++) {
        if (id === buttons[i].id) {
          this.$emit(buttons[i].fn)
        }
      }
      // console.log(this._props.buttons)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

</style>
